<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

    // 前端无法设置HttpOnly这个属性的
    console.log(Object.prototype.toString.call(document.cookie));
    console.log(Object.prototype.toString.call(localStorage));
    console.log(Object.prototype.toString.call(sessionStorage));
    // 写入cookie
    document.cookie = 'username=jessica'
    document.cookie = 'age=25'

    // cookie不能一起设置，只能分开设置
    // document.cookie='username=jessica;age=25 '

    // 读取cookie
    // 读取出来的是全部的cookie
    console.log(document.cookie);

    // cookie的名称或者值如果是用的中文，则需要用encodeURIComponent()编码，读取是需要使用decodeURIComponent()解码
    document.cookie = `school=${encodeURIComponent('理工')}`

    // cookie到期时间 通过设置Expires 或者 Max-Age
    document.cookie = `aaa=bbb; expires=${new Date('2023-2-15 06:55:47')}`

    // 值为数字，表示当前时间+ 多少秒后过期
    // 如果max-age的值为0或者负数，则会删除这个cookie
    document.cookie = 'abc=123; max-age=5'

    document.cookie = 'xh=zx; secure=true'

</script>

</html>